import React from "react";
import { Card, Row, Col, Form, Input, Button, message, Icon, Checkbox } from "antd";
import { FormComponentProps } from "antd/lib/form/Form"; //获取form表单的interface
import "./index.less";

const FormItem = Form.Item;

interface IProp {}
interface IState {}

class LoginForm extends React.Component<IProp & FormComponentProps, IState> {
	constructor(props: IProp & FormComponentProps, state: IState) {
		super(props, state);
		this.state = {};
	}

	handleSubmit = () => {
		let userInfo = this.props.form.getFieldsValue();
		this.props.form.validateFields((err, values) => {
			if (!err) {
				message.success(`${userInfo.userName} 注册成功,当前密码为${userInfo.userPwd}`);
			}
		});
	};

	render() {
		const { getFieldDecorator } = this.props.form;
		return (
			<div>
				<div style={{ textAlign: "center", color: "red" }}>
					<h1>Login Form</h1>
				</div>

				<Card title="行内登录表单" className="button-wrap">
					<Row>
						<Col span={12}>
							<Form layout="inline">
								<FormItem>
									<Input prefix={<Icon type="user"></Icon>} type="text" placeholder="请输入用户名" />
								</FormItem>
								<FormItem>
									<Input prefix={<span className="icon icon-summary"></span>} placeholder="请输入密码" />
								</FormItem>

								<FormItem>
									<Button type="primary">登录</Button>
								</FormItem>
							</Form>
						</Col>
					</Row>
				</Card>
				<Card title="水平登录表单" className="button-wrap">
					<Row>
						<Col span={4}>
							<Form layout="horizontal">
								<FormItem>
									{getFieldDecorator("userName", {
										// initialValue: "Dean",
										rules: [
											{
												required: true,
												message: "用户名不能为空"
											},
											{
												min: 5,
												max: 10,
												message: "长度不在范围内"
											},
											{
												pattern: /^\w+$/g,
												message: "用户名必须为字母或数字"
											}
										]
									})(<Input prefix={<Icon type="user"></Icon>} type="text" placeholder="请输入用户名" />)}
								</FormItem>
								<FormItem>
									{getFieldDecorator("userPwd", {
										// initialValue: "Dean",
										rules: [
											{
												required: true,
												message: "密码不能为空"
											}
										]
									})(<Input prefix={<span className="icon icon-summary"></span>} type="password" placeholder="请输入密码" />)}
								</FormItem>
								<FormItem>
									{getFieldDecorator("remember", {
										valuePropName: "checked",
										initialValue: true
									})(<Checkbox>记住密码</Checkbox>)}
									<a href="javascript:void(0);" style={{ float: "right" }}>
										忘记密码
									</a>
								</FormItem>

								<FormItem>
									<Button type="primary" onClick={this.handleSubmit}>
										登录
									</Button>
								</FormItem>
							</Form>
						</Col>
					</Row>
				</Card>
			</div>
		);
	}
}

export default Form.create<IProp & FormComponentProps>()(LoginForm);
